<template>
	<view>
		<!-- 设备列表 -->
		<u-popup :show="shebeiShow" mode="bottom" @close="shebeiShow = false">
			<view class="device">
				<view class="devHerders flex  align-items  justify-content-between">
					<view class="devclose" @click="shebeiShow =  false">取消</view>
					<view class="comit" @click="deviceComit">确认</view>
				</view>
				<view class="device_serch">
					<u-search placeholder="模板名称" v-model="names" @custom="gettemplateList1" @search="gettemplateList1"
						@clear='gettemplateList1'></u-search>
				</view>
				<view class="device_list">
					<view class="device_herder flex justify-content-between">
						<view class="device_herder_name">模板名称</view>
						<view class="device_herder_name">操作票专业</view>
						<view class="device_herder_name">选中</view>
					</view>
					<scroll-view scroll-y="true " @scrolltolower="scrolltolower">
						<view class="sordec">
							<view class="device_item flex" v-for="(v,i) in deviceList" :key="i" @click="deviceCak(v)">
								<view class="itemss">{{v.taskName}}</view>
								<view class="itemss">{{v.category}}</view>
								<view class="itemss">
									<view class="yuans" v-if="v.id  != device">
									</view>
									<u-icon v-else name="checkmark-circle-fill" color="#267DFF" :size="20"></u-icon>
								</view>
							</view>
							<view class=" base" v-if="deviceList.length <=0">
								暂无数据
							</view>
							<!-- 	   <view class="sss" v-if="deviceList.length>=total">
							    没有更多了
						   </view> -->
							<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
								:nomore-text="nomoreText" />
						</view>
					</scroll-view>

				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		templateList
	} from '@/api/lssue.js'
	export default {
		name: "lussTmeple",
		data() {
			return {
				shebeiShow: false,
				deviceList: [],
				device: '',
				names: '',
				query: {
					PAGE_NO: 1,
					PAGE_SIZE: 10,
				},
				time: null,
				total: 0,
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了'
			};
		},
		mounted() {
			this.gettemplateList()
		},
		methods: {
			gettemplateList1() {
				this.deviceList = []
				this.query.PAGE_NO = 1
				this.query.PAGE_SIZE = 10
				this.gettemplateList()
			},
			scrolltolower() {
				if (this.deviceList.length < this.total) {
					if (!this.time) {
						this.time = setTimeout(() => {
							this.query.PAGE_NO++
							this.gettemplateList()
						}, 300)
					}
				}

				console.log("触底");
			},
			deviceCak(v) {
				this.device = v.id
			},
			deviceComit() {
				if (this.device == '') return uni.$u.toast('请选择模板名称')
				const arr = this.deviceList.filter(v => v.id == this.device)
				this.$emit('tmpletSubmit', arr[0])
				this.shebeiShow = false

			},
			async gettemplateList() {
				this.status = 'loading'
				const res = await templateList({
					taskName: this.names,
					...this.query
				})
				console.log(res, "gettemplateList");
				this.deviceList = this.deviceList.concat(res.rows)
				console.log(this.deviceList, "templateLists");
				this.total = res.total
				this.time = null
				console.log(this.deviceList.length >= res.total);
				if (this.deviceList.length >= res.total) {
					console.log(11111111111);
					this.status = 'nomore'
				} else {
					this.status = 'loading'
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.device {
		height: 1000rpx;
		padding: 0 30rpx;
		padding-top: 30rpx;

		&_serch {
			margin-top: 20rpx;
		}

		.devHerders {
			.devclose {
				font-size: 30rpx;
				color: rgb(144, 145, 147);
			}

			.comit {
				font-size: 30rpx;
				color: rgb(60, 156, 255);
			}

		}

		&_herder {
			margin-top: 20rpx;
			border: 1rpx solid #E6E6E6;
			border-right: none;
			height: 70rpx;

			view {
				text-align: center;
				border-right: 1rpx solid #E6E6E6;
				font-size: 28rpx;
				flex: 1;
				line-height: 70rpx;
			}

		}

		&_item {
			min-height: 80rpx;
			border-bottom: 1rpx solid #e6e6e6;
			border-left: 1rpx solid #E6E6E6;

			.itemss {
				text-align: center;
				border-right: 1rpx solid #E6E6E6;
				font-size: 28rpx;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				word-wrap: break-word;
				word-break: break-all;
			}
		}
	}

	.yuans {
		display: flex;
		width: 20rpx;
		height: 20rpx;
		border: 1rpx solid #E6E6E6;
		border-radius: 50%;
	}

	.sordec {
		height: 750rpx;
		// overflow-y: scroll;
	}

	.sss {
		text-align: center;
		margin-top: 20rpx;
		// color: #E6E6E6;
	}

	.base {
		text-align: center;
		margin-top: 20rpx;
	}
</style>